<template>
  <div>
    <span v-if="!props.mobileEncrypt">
      {{ props.mobilePhoneIns }}
    </span>
    <span v-else>
      {{ props.mobilePhone }}
    </span>
    <span v-if="props.mobilePhoneIns" class="distance-left">
      <svg-icon
        v-show="!props.mobileEncrypt"
        icon-class="close-eye"
        @click="toggleEncrypt"
      />
      <svg-icon
        v-show="props.mobileEncrypt"
        icon-class="eye-open"
        @click="toggleEncrypt"
      />
    </span>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  // 显示脱敏状态
  mobileEncrypt: {
    type: Boolean,
    default: () => false,
  },
  // 显示脱敏后的手机号
  mobilePhoneIns: {
    type: String,
    default: () => "",
  },
  // 原始手机号
  mobilePhone: {
    type: String,
    default: () => "",
  },
});
const emit = defineEmits(["toggleEncrypt"]);

/**
 * 切换加密状态
 * 此函数通过 emit 触发 'toggleEncrypt' 事件，用于在组件外部处理加密状态的切换
 * 该函数没有参数，也没有返回值
 */
function toggleEncrypt() {
  emit("toggleEncrypt");
}
</script>
